<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item
						:label="`${$t('member.merchant_id')}:`"
						prop="merchantId"
						:rules="[
							{
								required: false,
								message: $t('member.please_select_a_merchant'),
								trigger: 'change'
							}
						]"
					>
						<merchant-select
							v-model="queryData.merchantId"
							v-symbols
							:placeholder="$t('common.please_choose')"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							:disabled="!queryData.merchantId"
							size="medium"
							@click="handleSearch"
						>
							{{ $t('common.search') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div
				v-if="
					gameList.length > 0 &&
						bwVenueList[bwVenueType].type === 'dy'
				"
				class="add-btn-wrapper"
			>
				<el-button
					v-if="hasPermission('104045')"
					type="warning"
					:disabled="loading"
					icon="el-icon-folder"
					size="medium"
					@click="addRow"
				>
					{{ $t('common.add') }}
				</el-button>
			</div>
			<el-tabs
				v-show="listShow"
				v-model="activeName"
				@tab-click="handleClick"
			>
				<el-tab-pane
					v-for="item in bwVenueList"
					:key="item.code"
					:label="item.description"
					:name="item.code"
				></el-tab-pane>
			</el-tabs>
			<el-form
				ref="tableForm"
				:inline="false"
				size="normal"
				:model="{ tableData }"
			>
				<el-table
					v-show="listShow"
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						prop="gameId"
						align="center"
						:label="`${$t('member.game_id')}`"
						width="160"
					>
						<template slot-scope="scope">
							<span v-if="scope.row.gameName === '默认返水'">
								{{ $t('member.default_return_water') }}
							</span>
							<span v-else>
								<el-form-item
									:prop="`tableData.${scope.$index}.gameId`"
									:rules="[
										{
											required: true,
											message: $t(
												'member.please_choose_game'
											),
											trigger: 'change'
										}
									]"
								>
									<el-select
										v-model="scope.row.gameId"
										size="medium"
										:disabled="scope.row.disabled"
										@change="
											onSelected($event, scope.$index)
										"
									>
										<el-option
											v-for="item in gameList"
											:key="item.gameId"
											:label="
												item[
													getKey('gameName', {
														zh: true
													})
												]
											"
											:value="item.gameId"
											:disabled="item.disabled"
										></el-option>
									</el-select>
								</el-form-item>
							</span>
						</template>
					</el-table-column>

					<el-table-column
						prop="vip0"
						align="center"
						label="vip0"
						width="160"
					>
						<template slot="header">
							VIP0
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip0"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip0',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
							<br />
						</template>
					</el-table-column>
					<el-table-column
						prop="vip1"
						align="center"
						label="vip1"
						width="160"
					>
						<template slot="header">
							VIP1
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip1"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip1',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip2"
						align="center"
						label="vip2"
						width="160"
					>
						<template slot="header">
							VIP2
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip2"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip2',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip3"
						align="center"
						label="vip3"
						width="160"
					>
						<template slot="header">
							VIP3
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip3"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip3',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip4"
						align="center"
						label="vip4"
						width="160"
					>
						<template slot="header">
							VIP4
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip4"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip4',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip5"
						align="center"
						label="vip5"
						width="160"
					>
						<template slot="header">
							VIP5
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip5"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip5',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip6"
						align="center"
						label="vip6"
						width="160"
					>
						<template slot="header">
							VIP6
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip6"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip6',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip7"
						align="center"
						label="vip7"
						width="160"
					>
						<template slot="header">
							VIP7
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip7"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip7',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip8"
						align="center"
						label="vip8"
						width="160"
					>
						<template slot="header">
							VIP8
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip8"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip8',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip9"
						align="center"
						label="vip9"
						width="160"
					>
						<template slot="header">
							VIP9
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip9"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip9',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vip10"
						align="center"
						label="vip10"
						width="160"
					>
						<template slot="header">
							VIP10
							<br />
							{{ $t('member.return_water_ratio') }}
						</template>
						<template slot-scope="scope">
							<el-input-number
								v-model.number="scope.row.vip10"
								class="inputBox"
								:min="0"
								:max="100"
								:precision="2"
								@blur="
									checkTransferValue(
										scope.row,
										'vip10',
										scope.$index
									)
								"
							></el-input-number>
							<span>%</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="`${$t('common.actions')}`"
						width="160"
					>
						<template slot-scope="scope">
							<el-button
								v-if="scope.row.gameId !== 0"
								type="danger"
								icon="el-icon-delete"
								size="medium"
								@click="deleteRow(scope.$index, scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div v-if="tableData.length" class="save-btn-wrapper">
				<el-button
					v-if="hasPermission('104042')"
					type="primary"
					@click="submitData()"
				>
					{{ $t('common.save') }}
				</el-button>
				<el-button
					v-if="hasPermission('104043')"
					@click="resetLastSaveData()"
				>
					{{ $t('member.restore_last_onfiguration') }}
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'

export default {
	name: routerNames.vipRebateConfig,
	components: {},
	mixins: [list],
	data() {
		return {
			selectedArr: [],
			bwVenueList: [],
			bwVenueType: 0,
			selectDisabled: false,
			showButton: true,
			gameList: [],
			listShow: false,
			tableData: [],
			activeName: '',
			queryData: {
				merchantId: ''
			},
			gameTypeList: [],
			flagData: [],
			id: '',
			flag: true
		}
	},
	computed: {
		...mapGetters(['merchantInfo'])
	},

	mounted() {},
	created() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.queryVipRebateRecord()
		}
	},
	methods: {
		addRow() {
			let len = 0
			if (
				this.tableData[0].gameName ===
				this.$t('member.default_return_water')
			) {
				len = this.tableData.length - 1
			} else {
				len = this.tableData.length
			}
			if (len >= this.gameList.length) {
				return this.$message.warning(
					`${this.$t('member.only_select_at_most') +
						this.gameList.length +
						this.$t('member.game')}`
				)
			}
			this.filterAvailableSelect()
			this.tableData.push({
				gameId: undefined,
				vip0: 0,
				vip1: 0,
				vip2: 0,
				vip3: 0,
				vip4: 0,
				vip5: 0,
				vip6: 0,
				vip7: 0,
				vip8: 0,
				vip9: 0,
				vip10: 0
			})
		},
		handleSearch() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.bwVenueList = []
					this.tableData = []
					this.queryVipRebateRecord()
				}
			})
		},
		queryVipRebateRecord() {
			this.$api
				.getMemberVipRebateRecordselectVenues({
					merchantId: this.queryData.merchantId
				})
				.then((res) => {
					if (res?.code === 200) {
						this.bwVenueList = res?.data.map((item) => ({
							...item,
							description: item.description
						}))
						this.activeName = this.bwVenueList[0].code
						this.listShow = true
					}
					this.getMemberVipRebateSelectAllInfo()
				})
		},
		filterAvailableSelect() {
			this.selectedArr = []
			this.tableData.forEach((item) => {
				this.selectedArr.push(item.gameId, item)
				this.gameList.forEach((v, i) => {
					v.disabled = this.selectedArr.includes(v.gameId)
				})
			})
		},
		getMemberVipRebateSelectAllInfo() {
			this.loading = true
			this.tableData = []
			this.flagData = []
			const tableArr = []
			const params = {
				merchantId: this.queryData.merchantId,
				venueCode: this.activeName
			}
			this.$api
				.getMemberVipRebateSelectAllInfo(params)
				.then((res) => {
					this.loading = false
					this.flag = true
					const { code, data } = res
					if (res && code && code === 200) {
						for (let i = 0; i < data.length; i++) {
							// this.getMemberVipRebateRecordselectVenues()
							const obj = {}
							const D = data[i]
							obj.defaultType = D.defaultType
							obj.gameId = D.gameId
							obj.gameName = D.gameName

							obj.vip0 = (D.vip0 * 100).toFixed(4) * 1
							obj.vip1 = (D.vip1 * 100).toFixed(4) * 1
							obj.vip2 = (D.vip2 * 100).toFixed(4) * 1
							obj.vip3 = (D.vip3 * 100).toFixed(4) * 1
							obj.vip4 = (D.vip4 * 100).toFixed(4) * 1
							obj.vip5 = (D.vip5 * 100).toFixed(4) * 1
							obj.vip6 = (D.vip6 * 100).toFixed(4) * 1
							obj.vip7 = (D.vip7 * 100).toFixed(4) * 1
							obj.vip8 = (D.vip8 * 100).toFixed(4) * 1
							obj.vip9 = (D.vip9 * 100).toFixed(4) * 1
							obj.vip10 = (D.vip10 * 100).toFixed(4) * 1
							tableArr.push(obj)
						}
						this.tableData = tableArr || []
						this.tableData.gameId = tableArr.gameName
						this.filterAvailableSelect()
					}
				})
				.catch(() => {
					this.flag = true
					this.loading = false
				})
		},
		handleClick(val) {
			this.bwVenueType = val.index
			this.$api
				.getGameGetGameListByVenueCode({ venueCode: this.activeName })
				.then((res) => {
					if (res.code === 200) {
						this.gameList = res.data
						this.getMemberVipRebateSelectAllInfo({
							venueCode: this.activeName,
							merchantId: this.queryData.merchantId
						})
					}
				})
		},
		submitData() {
			this.$refs.tableForm.validate((valid) => {
				if (valid) {
					this.loading = true
					const params = []
					for (let i = 0; i < this.tableData.length; i++) {
						const obj = {}
						const D = this.tableData[i]
						obj.merchantId = this.queryData.merchantId
						obj.gameId = D.gameId
						obj.venueCode = this.activeName
						obj.vip0 = (D.vip0 / 100).toFixed(4) * 1
						obj.vip1 = (D.vip1 / 100).toFixed(4) * 1
						obj.vip2 = (D.vip2 / 100).toFixed(4) * 1
						obj.vip3 = (D.vip3 / 100).toFixed(4) * 1
						obj.vip4 = (D.vip4 / 100).toFixed(4) * 1
						obj.vip5 = (D.vip5 / 100).toFixed(4) * 1
						obj.vip6 = (D.vip6 / 100).toFixed(4) * 1
						obj.vip7 = (D.vip7 / 100).toFixed(4) * 1
						obj.vip8 = (D.vip8 / 100).toFixed(4) * 1
						obj.vip9 = (D.vip9 / 100).toFixed(4) * 1
						obj.vip10 = (D.vip10 / 100).toFixed(4) * 1
						params.push(obj)
					}
					this.$api
						.setMemberVipRebateUpdateRebateInfo(params)
						.then(() => {
							this.loading = false
							this.$message.success(
								this.$t('common.save_success')
							)
							this.getMemberVipRebateSelectAllInfo()
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		resetLastSaveData() {
			const params = {
				merchantId: this.queryData.merchantId,
				venueCode: this.activeName
			}
			this.memberVipRebateRollbackAPI(params)
		},
		memberVipRebateRollbackAPI(params) {
			this.loading = true
			this.tableData = []
			const tableArr = []
			this.$api
				.memberVipRebateRollbackAPI(params)
				.then((res) => {
					this.loading = false
					this.flag = true
					const { code, data } = res
					if (res && code && code === 200) {
						for (let i = 0; i < data.length; i++) {
							const obj = {}
							const D = data[i]
							obj.configRebateStatus = D.configRebateStatus
							obj.defaultType = D.defaultType
							obj.gameId = D.gameId
							obj.gameName = D.gameName
							obj.vip0 = (D.vip0 * 100).toFixed(4) * 1
							obj.vip1 = (D.vip1 * 100).toFixed(4) * 1
							obj.vip2 = (D.vip2 * 100).toFixed(4) * 1
							obj.vip3 = (D.vip3 * 100).toFixed(4) * 1
							obj.vip4 = (D.vip4 * 100).toFixed(4) * 1
							obj.vip5 = (D.vip5 * 100).toFixed(4) * 1
							obj.vip6 = (D.vip6 * 100).toFixed(4) * 1
							obj.vip7 = (D.vip7 * 100).toFixed(4) * 1
							obj.vip8 = (D.vip8 * 100).toFixed(4) * 1
							obj.vip9 = (D.vip9 * 100).toFixed(4) * 1
							obj.vip10 = (D.vip10 * 100).toFixed(4) * 1
							tableArr.push(obj)
						}

						this.tableData = tableArr || []
						this.$message({
							message: this.$t('member.reset_succeeded'),
							type: 'success'
						})
					}
				})
				.catch(() => {
					this.flag = true
					this.loading = false
				})
		},
		checkTransferValue(row, val, index) {
			if (!row[val]) {
				row[val] = 0
			}
		},
		deleteRow(index, val) {
			this.tableData.splice(index, 1)
			this.filterAvailableSelect()
		},
		validateRebate(fieldName, index) {
			return (rule, value, callback) => {
				if (!value) {
					callback(new Error(this.$t('member.please_choose_game')))
				} else {
					callback()
				}
			}
		},
		onSelected(val, index) {
			this.selectedArr.push(val, index)
			this.gameList.forEach((v, i) => {
				v.disabled = this.selectedArr.includes(v.gameId)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-tabs__item {
	font-weight: 700;
}
.inputBox {
	width: 85%;
	margin: auto;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.add-btn-wrapper {
	display: flex;
	padding: 20px 0;
	justify-content: flex-end;
}
.save-btn-wrapper {
	display: flex;
	padding: 20px 0;
	justify-content: center;
}
</style>
